@charset "UTF-8";
@import "../core/core";

/*个人中心头像区域*/
.u-a-area {
  background: #ff4d46;
  padding: 1.6rem;
  .u-avator {
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
    border-radius: 5rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .4);
    text-align: center;
    img {
      width: 100%;
      height: auto;
    }
  }
  .u-name {
    display: block;
    margin-top: 1rem;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
  }
}

/*个人中心操作列表*/
.u-list {
  margin-top: 1rem;
  padding-left: 1rem;
  background: #fff;
  @include border-both(#e6e6e6);
  a {
    display: block;
    height: 4.4rem;
    line-height: 4.4rem;
    font-size: 1.4rem;
    color: $gray6;
    border-bottom: 1px solid #f0f0f0;
    &:last-child {
      border-bottom: 0;
    }
    .iconfont {
      color: #fff;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      width: 3rem;
      height: 3rem;
      margin-right: 0.4rem;
      line-height: 3rem;
      text-align: center;
      border-radius: 1.5rem;
      &.u-l-order {
        background: #5baaff;
      }
      &.u-l-zhanghu {
        background: #7090ff;
      }
      &.u-l-mima {
        background: #ff9553;
      }
      &.u-l-nicheng {
        background: #57987b;
      }
    }
    .icon-arrow1 {
      float: right;
      margin-right: 1rem;
      font-size: 1.2rem;
      vertical-align: middle;
      line-height: 4.4rem;
      color: $grayC;
    }
  }
}

/*收货地址列表*/
.address-list {
  margin-top: 1rem;
  padding-left: 1rem;
  background: #fff;
  @include border-both(#e6e6e6);

  .address {
    display: flex;
    flex-direction: row;
    height: 4.4rem;
    line-height: 4.4rem;
    font-size: 1.4rem;
    color: $gray6;
    border-bottom: 1px solid #f0f0f0;
    .address-head {
      flex-grow: 0;
      width: 4rem;
      flex-shrink: 0;
    }
    .address-body {
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      flex-direction: column;
      line-height: 2rem;
      font-size: 1.2rem;
      .address-up{
        height: 2rem;
        padding-top: 0.2rem;
        flex-grow: 0;
        flex-shrink: 0;
        margin: 0px;
      }
      .address-down{
        flex-grow: 1;
        flex-shrink: 1;
        height: 2rem;
        font-size: 0.8rem;
      }


    }
    .shugang{
      border-left:1px solid $grayC;
      text-align: center;
    }
    .red-font{
      background-color: $red;
      color: $white;
      font-size: 0.6rem;
      padding: 0.1rem;
    }
  }

}

/*用户中心表单*/
.form-group {
  margin-top: 1px;
  padding: 1.6rem;
  input[type="password"],
  input[type="text"],
  input[type="number"] {
    width: 100%;
    height: 4.2rem;
    font-size: 1.4rem;
    padding: 1rem 1rem;
    border: 0;
  }
  .form-item {
    position: relative;
    border: 1px solid $grayC;
    margin-top: -1px;
    overflow: hidden;
    &.first-item {
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
    }
    &.last-item {
      border-bottom-left-radius: 0.4rem;
      border-bottom-right-radius: 0.4rem;
    }
    &.single-item {
      border-radius: 0.4rem;
    }
  }
  .form-item-btn {
    margin-top: 1.4rem;
    button {
      width: 100%;
      height: 4.2rem;
      padding-left: 0;
      font-size: 1.5rem;
      line-height: 4.2rem;
      color: #fff;
      border: 0;
      background: $red;
      border-radius: 0.4rem;
    }
  }
  .get-code-btn {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    height: 3rem;
    font-size: 1.2rem;
    line-height: 3rem;
    padding: 0 1rem;
    background: $orange;
    color: #fff;
    border-radius: .2rem;
    &.disable {
      background: $grayC;
    }
  }
  input[readonly="readonly"] {
    color: $gray9;
  }
}

/*登录页面/账户页面tag样式*/
.com-tag {
  width: 100%;
  height: 4rem;
  background: #fff;
  @include border-bottom($borderGrayE);
  @include display-flex();
  > a {
    display: block;
    width: 50%;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 1.3rem;
    span {
      color: $gray6;
    }
    &.tag-on {
      span {
        display: inline-block;
        height: 4rem;
        line-height: 4rem;
        color: $red;
        border-bottom: 2px solid $red;
      }
    }
  }
}

.live-message-info{
  width: 100%;
  height: 4rem;
  background: #fff;
  @include border-bottom($borderGrayE);
    display: block;
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 1.3rem;
    span {
      color: $red;
    }

}

/*我的账户*/
.preview {
  padding: 2rem;
  background: $orange;
  text-align: center;
  &.balan {
    background: #3babdf;
    h1 {
      text-shadow: 0 2px 5px #2d84d3;
    }
  }
  p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .75);
  }
  h1 {
    font-size: 4rem;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 5px #e6731f;
    @include ellipsis();
  }
}

.history-list {
  //background: #fff;
  padding-left: 1rem;
  li {
    height: 6rem;
    padding: 1rem 1rem 1rem 0;
    @include clearfix();
    @include border-bottom($borderGrayE);
    .his-info {
      float: left;
      .type {
        height: 2rem;
        line-height: 2rem;
        font-size: 1.5rem;
      }
      .date {
        height: 2rem;
        line-height: 2rem;
        font-size: 1.2rem;
        color: #888;
      }
    }
    .his-sum {
      float: right;
      height: 4rem;
      font-size: 2.6rem;
      line-height: 4rem;
      text-align: right;
      &.minus {
        color: #ff4d4a;
      }
      &.plus {
        color: #41bb85;
      }
    }
  }
  .com-notice {
    margin-left: -1rem;
  }
}

/*我的定单*/
.order-item {
  margin-top: 1rem;
  @include border-both($borderGrayE);
  .order-title {
    padding: 0.7rem 1rem;
    height: 5rem;
    @include ellipsis();
    @include border-bottom($borderGrayF);
    h1 {
      height: 2rem;
      font-size: 1.5rem;
      line-height: 2rem;
    }
    p {
      height: 1.6rem;
      font-size: 1.2rem;
      line-height: 1.6rem;
      color: $gray9;
    }
  }
  .g-item-wrap {
    padding: 1rem;
    .reg-count {
      float: right;
      margin-right: 0;
      font-weight: 700;
    }
    .g-i-count {
      span {
        color: $gray3;
      }
    }
  }
  .order-info {
    height: 4.4rem;
    padding: 0 1rem;
    line-height: 4.4rem;
    @include display-flex();
    .order-room {
      display: inline-block;
      width: 50%;
      font-size: 1.5rem;
      @include ellipsis();
    }
    .order-price {
      display: inline-block;
      width: 50%;
      font-size: 1.5rem;
      text-align: right;
      vertical-align: middle;
      span {
        font-weight: 700;
        color: $red;
      }
    }
    &.dn-info {
      display: block;
      border-top: 1px solid $borderGrayF;
      .dn-order-state {
        color: $orange;
      }
      .dn-order-time {
        font-size: 1.3rem;
        color: $gray9;
      }
      .order-btn{
        //padding: 0.1rem;
        .red-button {
          width: 70%;
          height: 3rem;
          font-size: 1.5rem;
          line-height: 3rem;
          text-align: center;
          color: $white;
          border: 0;
          background: $red;
          border-radius: 0.4rem;
        }
        .yellow-button {
          width: 25%;
          height: 3rem;
          font-size: 1.5rem;
          line-height: 3rem;
          text-align: center;

          border: 0;
          //background: $red;
          border-radius: 0.4rem;
        }
      }

    }
  }

}

.logout {
  padding: 1rem;
  button {
    width: 100%;
    height: 4rem;
    font-size: 1.5rem;
    line-height: 4rem;
    text-align: center;
    color: $red;
    border: 0;
    background: #fff;
    border-radius: 0.4rem;
  }
}

.list-button {
  padding: 1rem;
  button {
    width: 100%;
    height: 4rem;
    font-size: 1.5rem;
    line-height: 4rem;
    text-align: center;
    color: $red;
    border: 0;
    background: #fff;
    border-radius: 0.4rem;
  }
}

/*登录后设置密码*/
.set-notice {
  padding-bottom: 0.6rem;
  font-size: 1.3rem;
  color: $gray9;
}


.userinfo-list {
  background: #fff;
  display: flex;
  flex-direction: row;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.6rem;
  width: 100%;
  .left {
    max-width: 7rem;
    min-width: 7rem;
    flex: 0 1 auto;
  }
  .middle {
    flex: 1 1 auto;
    min-width: 10rem;
    input{
      max-height: 2rem;
      min-width: 10rem;
      display: block;
      height: 4rem;
      font-size: 1.5rem;
      line-height: 3.5rem;
      color: #555;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-top: -1px;
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      &.address-textarea {
        height: auto;
      }
    }
  }
  .middle2 {
    flex: 1 1 auto;
    min-width: 7rem;
    input{
      max-height: 2rem;
      min-width: 10rem;
      max-width: 10rem;
      display: block;
      height: 4rem;
      padding: 6px 12px;
      font-size: 1.5rem;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-top: -1px;
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      &.address-textarea {
        height: auto;
      }
    }
  }
  .right {
    max-width: 13rem;
    min-width: 13rem;
    flex: 0 1 auto;
    padding-left: 0.5rem;

  }

  .user-btn {
    font-size: 1.8rem;
    border: none;
    background: #00aff0;
    color: #fff;
    border-radius: 4px;
    width: 11rem;
    margin: 0.5rem;
  }
}

.alipay-btn {
  font-size: 1.8rem;
  margin-left: 10rem;
  margin-top: 1rem;
  border: none;
  background: #00aff0;
  padding: .6rem 3rem;
  color: #fff;
  border-radius: 4px;
}


.userinfo-list2 {
  background: #fff;
  display: flex;
  flex-direction: row;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.6rem;
  width: 100%;
  .left {
    max-width: 7rem;
    min-width: 7rem;
    flex: 0 1 auto;
  }

  .middle2 {
    flex: 1 1 auto;
    min-width: 16rem;
    input{
      max-height: 2rem;
      min-width: 15rem;
      max-width: 15rem;
      display: block;
      height: 4rem;
      font-size: 1.5rem;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-top: -1px;
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      &.address-textarea {
        height: auto;
      }
    }
  }
  .right {
    max-width: 7rem;
    min-width: 7rem;
    flex: 0 1 auto;
    padding-left: 0.5rem;

  }
  .user-btn {
    font-size: 1.8rem;
    border: none;
    background: #00aff0;
    color: #fff;
    border-radius: 4px;
    width: 5.5rem;
    margin: 0.5rem;
  }

}